<template>
  <div>
    <HeaderComponent />

    <div id="BackLink">
      <router-link :to="`/product/${item.categoryId}/${item.productId}`">
        Return to <span>{{ item.productId }}</span>
      </router-link>
    </div>

    <div id="Wrapper">
      <div id="Catalog" style="display: flex; justify-content: center; align-items: center; position: absolute; top: 40%; border: 3px solid #734012; border-radius: 12px; padding: 20px; margin: 20px auto; background-color: #fffdfa; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); max-width: 1200px;">
        <!-- 左侧图片 -->
        <div class="image-container"  style="flex: 1; text-align: center; padding: 10px; background-color: #fef3e7; border-radius: 8px;">
          <img :src="item.productDescription" alt="Item Image" />
        </div>

        <!-- 右侧表格 -->
        <div class="table-container" style="flex: 1; padding: 10px; border-left: 1px dashed #d4a373;">
          <table style="width: 100%; border-collapse: collapse;">
            <thead>
            <tr>
              <th><b>{{ item.itemId }}</b></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <b>
                  <span>{{ item.attribute1 }}</span>
                  <span>{{ item.attribute2 }}</span>
                  <span>{{ item.attribute3 }}</span>
                  <span>{{ item.attribute4 }}</span>
                  <span>{{ item.attribute5 }}</span>
                  <span>{{ item.productName }}</span>
                </b>
              </td>
            </tr>
            <tr>
              <td>{{ item.productName }}</td>
            </tr>
            <tr>
              <td>
                <span v-if="item.quantity <= 0">Back ordered.</span>
                <span v-else>{{ item.quantity }} in stock.</span>
              </td>
            </tr>
            <tr>
              <td>{{ formattedPrice }}</td>
            </tr>
            <tr>
              <td>
                <button @click="addToCart(item.itemId)" class="Button">Add to Cart</button>
              </td>
            </tr>
          </tbody>
          </table>
        </div>
      </div>
    </div>

    <FooterComponent />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { getItemDetails, addItemToCart } from '@/api/item';
import '@/assets/css/global.css';
import HeaderComponent from '@/components/Header.vue';
import FooterComponent from '@/components/Footer.vue';

const route = useRoute();

const item = ref({});
const product = ref({});
const formattedPrice = ref('');

// 获取商品详情
const fetchItemDetails = async () => {
  const { data } = await getItemDetails(route.params.itemId);
  item.value = data;
  console.log('item data:', data);
  formattedPrice.value = `$${data.listPrice.toFixed(2)}`;
};

// 加入购物车
const addToCart = async (itemId) => {
  await addItemToCart(itemId);
  alert('Item added to cart!');
};

onMounted(fetchItemDetails);
</script>

<style scoped>  
/* 按钮正常状态 */
Button, Button:link, Button:visited {
    padding: .3ex 1ex; /* 调整内边距 */
    color: #734012; /* 深棕色文字，与主色调一致 */
    background-color: #fccc1c; /* 亮黄色背景，与主色调一致 */
    text-decoration: none; /* 去掉下划线 */
    font-family: helvetica, tahoma, arial, verdana, sans-serif; /* 字体 */
    font-size: 1.5ex; /* 字体大小 */
    /* border: 2px solid #734012;深棕色边框 */
    border-radius: 6px; /* 圆角 */
    transition: all 0.3s ease; /* 平滑过渡效果 */
}

/* 按钮悬停状态 */
Button:hover {
    color: #fff; /* 白色文字 */
    background-color: #734012; /* 深棕色背景 */
    border-color: #734012; /* 保持深棕色边框 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}

/* 按钮按下状态 */
Button:active {
    background-color: #b3741d; /* 较深的橙色背景 */
    color: #fff; /* 保持白色文字 */
    box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.3); /* 内嵌阴影，增加按压感 */
}
</style>